<template>
  <draggable class="recommed-container" draggable=".item" :group="{ name: 'cc', pull: 'clone', put: false }">
    <el-row :gutter="20">
      <draggable v-model="dlist" @change="listChange" :disabled="disabled" class="list-group-c" draggable=".item0"
        :group="{ name: 'bb', put: false }">
        <el-col class="item0" :class="{ 'active': item.active }" :style="setFullBorderPadding(index)"
          :span="getEqualDivisionSpan(item)" tag="div" v-for="(item, index) in dlist" :key="index"
          @click.native="activeContainer(item, index)">
          <draggable :list="item.list" @change="listChange" class="list-group" draggable=".item" group="aa">
            <!--右侧 tab分栏 -->
            <el-tabs tabPosition="left" v-model="activeName" type="card" v-if="item.group === 0">
              <el-tab-pane v-for="(subitem, subindex) in item.list" :key="subindex" :label="subitem.text"
                :name="subitem.name">
                <draggable :list="subitem.list" @change="listChange" class="list-sub-group" draggable=".item" group="aa">
                  <slot class="item" name="item" v-bind="subitem.list"></slot>
                </draggable>
              </el-tab-pane>
            </el-tabs>
            <!-- 左侧分栏 -->
            <slot v-else class="item" name="item" v-bind="item.list"></slot>
          </draggable>
        </el-col>
      </draggable>
    </el-row>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
import componentProperties from "@/utils/componentProperties";
export default {
  name: 'recommendContainer',
  components: {
    draggable
  },
  data () {
    return {
      dlist: [],
      tabs: [
        {
          text: '同步高手',
          type: 'container',
          name: 'synch'
        },
        {
          text: '专项高手',
          type: 'container',
          name: 'special'
        },
        {
          text: '提分高手',
          type: 'container',
          name: 'raise'
        },
        {
          text: '素养高手',
          type: 'container',
          name: 'attainment'
        }
      ],
      activeName: 'synch',
      disabled: false
    }
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    datas: {
      type: Array
    }
  },
  watch: {
    list: {
      handler (val) {
        if (val.length > 0) {
          // this.disabled = true;
          this.dlist = val;
        } else {
          this.createDatas();
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    setFullBorderPadding (index) {
      return index === 0 ? 'padding-left: 0' : index === this.dlist.length - 1 ? 'padding-right: 0' : '';
    },
    activeContainer (m, index) {
      m.active = true;
      this.dlist.forEach(res => {
        if (res.group !== m.group) {
          res.active = false;
        }
      })
    },
    updatedEditView () {
      const tabs = this.datas[0].setStyle.tabs;
      this.dlist.forEach(res => {
        this.recursiveTraverse(res, (re, ii) => {
          if (re.name) {
            const el = tabs.find(item => item.name === re.name);
            if (el) {
              re.text = el.text;
            }
          }
        })
      });
      this.$emit("update:list", this.dlist);
    },
    updatedAddView (number) {
      const tabs = this.datas[0].setStyle.tabs;
      const json = {
        list: [],
        text: "学科标题",
        type: "container",
        name: "sync" + (number - 1),
        group: tabs.length + 1,
      };
      this.dlist[0].list.push(json);
      this.$emit("update:list", this.dlist);
    },
    updatedDeleteView (index) {
      this.dlist[0].list.splice(index,1);
      this.$emit("update:list", this.dlist);
    },
    listChange (val) {
      this.dlist.forEach(res => {
        this.recursiveTraverse(res, (re, ii) => {
          if (re && re.active === true) {
            re.active = false;
          }
        })
      });
      if (val.added) {
        // val.added.element.active = true;
        // this.$forceUpdate();
        const comp = val.added.element;
        comp.icon = undefined;
        comp.setStyle = JSON.parse(JSON.stringify(componentProperties.get(comp.name).setStyle));
        this.$emit('activeCom', val.added.element);
      }
      this.$emit('update:list', this.dlist);
    },
    recursiveTraverse (node, action) {
      action(node);
      if (!node || !node.list || node.list.length === 0) {
        return;
      }
      node.list.forEach((item) => {
        this.recursiveTraverse(item, action);
      });
    },
    createDatas () {
      this.dlist = [
        {
          list: [],
          text: '推荐页左容器',
          direction: "0",
          abstract: {
            component: "recomentTab",
            text: "推荐页左边组件",
            style: "recoment_tab_style1",
            setStyle: {},
            ratio: "1.00",
          },
          type: 'containers',
          // 指定下面的组件一定是 容器组件
          active: true,
          ratio: '0.72',
          //setStyle: {}
          group: 0
        },
        {
          list: [],
          text: '推荐页右容器',
          type: 'containers',
          direction: "0",
          ratio: '0.28',
          active: false,
          //setStyle: {}
          group: 1
        }
      ];
      const container = [];
      this.tabs.forEach((item, index) => {
        const json = {
          list: [],
          ...item,
          group: index
        }
        container.push(json);
      });
      this.dlist[0].list = container;
      this.$emit('update:list', this.dlist);
    }
  },
  computed: {
    getEqualDivisionSpan () {
      return function (item) {
        return item.group == 0 ? 16 : 8;
      }
    }
  },
  created () {
  }
}
</script>

<style scoped lang="scss">
.recommed-container,
.list-group-c {
  height: 100%;
}

.recommed-container {
  .active {
    .list-group {
      border-color: rgb(243, 235, 3);
    }
  }

  .list-group {
    color: white;
    border: 1px salmon solid;
    text-align: center;
    height: 100%;
    cursor: pointer;
    min-height: 800px;
    border-radius: 14px;
  }

  .list-sub-group {
    height: 100%;
    cursor: pointer;
    border: 1px rgb(10, 77, 72) solid;
    min-height: calc(100vh - 100px);
    border-radius: 14px;
  }
}
</style>
<style lang="scss">
.recommed-container {
  .el-row {
    height: 100% !important;
    margin: 0 !important;
  }

  .el-col {
    height: 100%;
  }

  .el-tabs__item {
    height: auto;
    writing-mode: tb-rl;
  }

  .el-tabs--left .el-tabs__header.is-left {
    margin-right: 0;
    padding-top: 15px;
  }

  .el-tabs__item {
    padding: 20px 0;
    color: #83F0C9;
    font-weight: 600;
    letter-spacing: 0.3em;
    background: linear-gradient(180deg, #08967C 0%, #07816F 100%);
    border-radius: 10px 0px 0px 10px;
  }

  .el-tabs__item.is-active {
    color: #FFDB7A;
    background: #0A4C48;
  }
}
</style>
